<template>
  <div class="_fileList" v-if="lists[urlKey]">
    <div class=" flex-box center " style="align-items: flex-start;">
      <div class="flex-box fileBox ov center bg-gray-info" v-if="videoTest.test(lists[urlKey])">
        <video :src="lists[urlKey]" class="fileImg" controls="controls">
        </video>
      </div>
      <div v-else class="flex-box ov fileBox  center bg-gray-info">
        <div class="new_list  t-center">
          <el-image :src='lists[urlKey]' v-if="!isImg(lists[urlKey])"></el-image>
          <svg-icon class="fileSvg" v-else :icon-class="getFileCate(lists[urlKey])|| pdf" />
        </div>
      </div>
      <div class="editFileBox" v-if='options.edit||!lists[urlKey]'>
        <UploadPicFile class="fl" :options="{'show-list':false,'show-file-list':false,'edit':true,
             fileTest:options.fileTest}"
          style="width:280px" type="file" @uploadSuccess="editFile" />
      </div>
      <el-button size="mini" icon="el-icon-close" round class="closeBorder" @click="deleteList(lists)"></el-button>
      <!--   {{list[titleKey] }} -->
    </div>
    <!-- <s-progress v-if="options.progress"
     @finishProgress="closeProgress"
     :progressStatus="options.progress.progressStatus">
     </s-progress> -->
    <div class="ov t-center" v-show="lists[titleKey] ">{{lists[titleKey] }}</div>
  </div>
  <div v-else-if="options.edit" class="ov">
    <div class="editFileBox" >
      <UploadPicFile class="fl" :options="{'show-list':false,'show-file-list':false,'edit':true,
           fileTest:options.fileTest,}"
        style="width:280px"  @uploadSuccess="editFile">
          <el-button type="text"  :icon="options.icon||'el-icon-circle-plus-outline'" style="font-size: 45px;"></el-button>
        </UploadPicFile>
    </div>
  </div>

</template>
<script>
  import sProgress from '@/components/FilesLayout/progress'
  import UploadPicFile from '@/components/UploadPicFile'
  export default {
    components: {
      sProgress,
      UploadPicFile
    },
    props: {
      options: {
        default () {
          return {}
        }
      },
      list: {
        type: [Object, String],
        default: () => {
          return {}
        },
        required: true
      }
    },
    data() {
      return {
        urlKeys:this.options.url || 'url',
        titleKeys: 'title',
        lists: {},
        videoTest: /\w+(.flv|.rvmb|.mp4|.avi|.wmv)$/,
        "fileList": [{
          "createTime": "2020-07-04T10:14:26.947Z",
          "id": 0,
          "title": "string",
          "url": "isnad.psd",
          "userId": 0
        }]
      }
    },
    created() {},
    watch: {
      // options(val) {
      //   this.urlKey = val.url ? val.url : this.urlKey
      // },
      list: {
        handler: function(val) {

          let nV = {}

          if (this.urlKeys&&typeof(val) ==='string' ) {
            nV[this.urlKey] = val
          } else {
            nV = val
          }

          this.lists = nV
        },
        immediate: true

      }
    },
    computed: {
      urlKey: {
        get() {
          return this.options.url || this.urlKeys
        },
        set() {
          return this.options.url
        }
      },
      titleKey: {
        get() {
          return this.options.title || this.titleKeys
        },
        set() {
          return this.options.title
        }
      }
    },
    methods: {
      deleteList(list) {
        delete list[this.urlKey]
        this.$set(list, this.urlKey, list[this.urlKey])
        //
        this.$emit('deleteList', list)
      },
      editFile({
        res,
        file,
        that
      }) {

        var list = this.lists
        // list.files = that.info.filesUrl
        // list.title = file.name
        this.$set(list, this.urlKey, that.info.filesUrl)
        this.$set(list, this.titleKey, file.name)
        this.$emit("editFile", this)
        // this.$set(list,this.urlKey,)
      },
      closeProgress(val) {
        this.options.progress = val
        this.progressStatus = val
      },
      save() {
        this.options.progress = true
        setTimeout(() => {
          this.progressStatus = true
        }, 3000)
      },
      listClick(listItem) {
        this.$emit('listClick', listItem)
      },

    }
  }
</script>
<style lang="scss" scoped>
  ._fileList {
    min-height: 300px;
    min-width: 60%;

    position: relative;
    margin-bottom: 15px;

    .fileBox {
      // height: 200px;
      width: 90%;

      margin: 5px 10px;

    }

    .new_list {}

    .editFileBox {
      display: none;
      position: absolute;
      right: 0;
    }

    &:hover>.editFileBox {
      display: block;
    }

    .fileImg {
      width: 98%;
      height: 300px;

    }
    .fileSvg{
      width: auto;
      margin: 10px auto;
      height: 100px;
    }
  }
</style>
<style lang="scss">
  //.new_box component
</style>
